<script setup lang="ts">
import CdlSearch from "@/components/search";
import {reactive, h} from "vue";
import {Query, Request, State} from "@/interfaces/components/Page";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import {Appeal} from "@/interfaces/views/task/appeal"
import {FormTree} from "@/interfaces/components/Form";
import CdlTable from "@/components/table";
import {TableTree} from "@/interfaces/components/Table";
import {ElImage} from "element-plus"
import {useRouter} from "vue-router";

const router = useRouter()
const request: Request ={
  createdIsNeed: true,
  url: "/project/complaint",
}

const searTree: FormTree<Appeal> = [
  [
    {component: "input", prop: "state", label: "处理状态"},
    {component: "input", prop: "name", label: "申诉司机"},
    {component: "input", prop: "operator", label: "处理人"},
  ]
]

const tabTree:TableTree<Appeal> = {
  colRule: [
    {ti: "申诉ID", prop: "id"},
    {ti: "关联任务", prop: "taskName"},
    {ti: "关联司机", prop: "name"},
    {ti: "申诉时间", prop: "createTime", width: 160},
    {ti: "运单开始时间", prop: "pwStartTime", width: 160},
    {ti: "运单完成时间", prop: "pwEndTime", width: 160},
    {ti: "申诉原因", prop: "info", width: 180, tooltip: true},
    {ti: "申诉凭证", prop: "img", slot: (scope)=>{
        const images = scope? JSON.parse(scope) : null
        return h(ElImage, {
          src: images?.imgs[0],
          previewSrcList: images?.imgs,
          previewTeleported: true,
        })
      }},
    {ti: "处理状态", prop: "state", dict: "appeal_state"},
    {ti: "处理意见", prop: "opinion", width: 180, tooltip: true},
    {ti: "处理人", prop: "operator"},
  ],
  control: [
    {name: "轨迹分析", type: "primary", method: ()=> {}, auth: "project:appeal:analyse"},
    {name: "详情", type: "info", prop: "id", method: jumpAppealDetails, auth: "project:appeal:info"}
  ]
}
/**
 * 跳转申诉详情
 * @param id
 */
function jumpAppealDetails(id: string | number){
  router.push({
    path: "/projectManage/appealManage/appealDetails",
    query: {
      id: id
    }
  })
}

const appealState = reactive<State<Query<Appeal>, Appeal>>({
  queryForm: {

  },
  dataList: []
})
const {query, handleSizeChange, handleCurrentChange, loading} = useTablePagingTemplate(request, appealState)
</script>

<template>
  <el-card>
    <CdlSearch :model="appealState.queryForm" :template-tree="searTree">
      <template #menu>
        <el-button type="primary" v-auth="'project:appeal:export'">导出</el-button>
      </template>
    </CdlSearch>
    <CdlTable :data="appealState.dataList" :template-tree="tabTree" :control-width="190" control-fixed></CdlTable>
  </el-card>
</template>
